<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column" style="width: 300px; max-width: 100%">
      <t-toolbar class="bg-primary text-white rounded-borders">
        <t-btn round dense flat icon="menu" class="q-mr-xs" />
        <t-avatar class="gt-xs">
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
        </t-avatar>

        <t-space />
        <t-field dark borderless>
          <template v-slot:control>
            <div class="self-center no-outline" tabindex="0"
              >Time is {{ value }}</div
            >
          </template>
          <template v-slot:append>
            <t-btn
              color="white"
              flat
              round
              dense
              :disable="value < 10"
              icon="replay_10"
              @click.stop.prevent="value -= 10"
            />
            <t-btn
              color="white"
              flat
              round
              dense
              :disable="value > 90"
              icon="forward_10"
              @click.stop.prevent="value += 10"
            />
          </template>
        </t-field>
      </t-toolbar>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        value: ref(50),
      };
    },
  };
</script>
